import React, { Component } from "react";

// import "./index.css"
export default class Header extends Component {
    state = {
        // 用户名输入框
        username: '',
        // 评论内容
        content: '',
    };
    // 受控组件的内容变化
    handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
    };
    handlePublish = (e) => {
        // 阻止表单默认刷新事件
        e.preventDefault();
        const { username, content } = this.state;
        // 判断内容是否为空
        if (!username.trim() || !content.trim())
            return alert('内容不能为空喔');
        console.log(74, username, content);
        this.props.handleAdd({ username, content });
        this.setState({ username: '', content: '', })
    };
    render() {
        const { username, content, } = this.state;
        const { removeList } = this.props;
        return (
            <div>
                <form onSubmit={this.handlePublish}>
                    <input className="user" onChange={this.handleChange} name="username" value={username} type="text" placeholder="请输入评论人" />
                    <br />
                    <textarea className="content" onChange={this.handleChange} name="content" value={content} cols="30" rows="10" placeholder="请输入评论内容" />
                    <br />
                    <button>发表评论</button>
                    <button type="button" onClick={removeList}>清空评论</button>
                </form>
            </div>
        );
    }
}
